<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<base href="<%=basePath%>" />
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="shortcut icon" href="images/icon/${his.favicon}" />
		<title>${his.hospitalName}-健康顾问</title>
		<link href="style/css.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery.js"></script>
		<script>
			function fz(){
				var ws = $("#wsearch").val();
				$("#search").val(ws);
			}
			function qz(){
				var sea = $("#search").val();
				$("#wsearch").val(sea);
			}
		</script>
		<style>
A.applink:hover {
	border: 2px dotted #DCE6F4;
	padding: 2px;
	background-color: #ffff00;
	color: green;
	text-decoration: none
}

A.applink {
	border: 2px dotted #DCE6F4;
	padding: 2px;
	color: #2F5BFF;
	background: transparent;
	text-decoration: none
}

A.info {
	color: #2F5BFF;
	background: transparent;
	text-decoration: none
}

A.info:hover {
	color: green;
	background: transparent;
	text-decoration: underline
}

.myDivcss {
	display: inline;
	margin-left: 1px;
	font-size: 18px;
	font-family: "行楷"
}

div #mesDiv1,#mesDiv2,#mesDiv3,#mesDiv4 {
	display: none;
}
</style>
		<script src="js/jquery.js"></script>
		<script>
				
		// 获得动植物下的子分类
		function getTypes(){
		var type = $("#type1").val();		
		$.getJSON("foodtype.do",{method:"getTypes",type1: type }, function(mytypes){
		$("#type2").html("<option>--------</option>");
		$("#foodname").html("<option>--------</option>");
		for(i = 0;i<mytypes.length;i++){
		$("#type2").append("<option value="+mytypes[i].tpid+ "> "+ mytypes[i].tpcname+ "</option>");
		}
		}); 		
		}		
		//获得分类下的食物列表
		function getFoodlist(){
		var type22 = $("#type2").val();
		$.getJSON("foods.do",{method:"getFoodlist",type2: type22 }, function(myfoodlist){
		$("#foodname").html("<option>--------</option>");
		for(i = 0;i<myfoodlist.length;i++){
		$("#foodname").append("<option value="+myfoodlist[i].fid+ "> "+ myfoodlist[i].fname+ "</option>");
		}
		}); 		
		}		
		function getFood(){
		var ffid = $("#foodname").val();
		// 利用食品名字去读取相应信息 ajax。
		// {forfood:"currFood",fid: ffid }
		$.getJSON("foods.do",{method:"currFood",fid: ffid }, function(myfood){
		  $("#foodimg").attr("src",myfood.fimguil);
		  $("#mesDiv1").text(myfood.fintroduce); 
		  $("#mesDiv2").text(myfood.fefficacy);
		  $("#mesDiv3").text(myfood.fclew);
		  $("#mesDiv4").text(myfood.fnutrition);
		  $("#fcookbookDiv").text(myfood.fcookbook);  
		}); 
		
		// 根据食物类型获取相关食物
		$.getJSON("foods.do",{method:"relFood",fid: ffid }, function(myrelfood){		
		$("#xiangguan").html("");
		for(i=0;i<myrelfood.length;i++){
		$("#xiangguan").append("<tr><td>"+myrelfood[i]+"</td></tr>");
		}
		}); 
		}
		
		function overCss(obj){
		obj.style.borderColor='red';
		}
		function leaveCss(obj){
		obj.style.borderColor='green';
		}
		function changeMes(mes){
		// 根据传来的div——id，改变各信息显示层的可见性。
		for(i=1;i<=4;i++){
		var mdiv = "#mesDiv"+i;
		if(i ==mes ){
		$(mdiv).css({display:"inline"}); 
		}else{
		$(mdiv).css("display","none");
		}
		}
		}

</script>
	</head>
	<body>
		<jsp:include page="users/userTop.jsp"></jsp:include>

		<table width="779px" border="0" align="center" cellpadding="0"
			cellspacing="0" style="margin-top: 7px" border="1">
			<tr>
				<td width="197px" align="left" valign="top" bgcolor="#F6F9FB"
					class="bgxz_zhong_bk">
					<table width="177px" border="0" cellspacing="0" cellpadding="0"
						style="margin-top: 4px; margin-left: 10px; margin-bottom: 60px;"
						border="1">
						<tr>
							<td align="left" valign="top">
								<table width="177px" border="0" cellpadding="0" cellspacing="0"
									style="margin-bottom: 6px;" border="1">
									<tr>
										<td height="28" align="center" valign="middle"
											bgcolor="#FFFFFF">
											<table width="196" height="26" border="0" cellpadding="0"
												cellspacing="0" bgcolor="skyblue">
												<tr>
													<td width="128" align="left">
														<strong>&nbsp;&nbsp;&nbsp;相关食物</strong>
													</td>
													<td>
														<a href="xxcg.asp~info_kind=002001.html" target="_parent">更多</a>
													</td>
												</tr>
											</table>
										</td>
									</tr>
									<tr>
										<td align="left" valign="top" class="bgxz_left_bk">
											<table id="xiangguan" width="151px" height="250px"
												cellpadding="0" cellspacing="0"
												style="margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 6px">
												<tr>
													<td>
														此处显示相关食物列表
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td height="100" align="left" valign="top">
								<table width="177" border="0" cellpadding="0" cellspacing="0"
									border="1">
									<tr>
										<td height="28" align="center" valign="middle"
											bgcolor="#FFFFFF">
											<table width="196" height="26" border="0" cellpadding="0"
												cellspacing="0" bgcolor="skyblue">
												<tr>
													<td width="128" align="left">
														<strong>&nbsp;&nbsp;&nbsp;相关食谱</strong>
													</td>
													<td>
														<a href="xxcg.asp~info_kind=002001.html" target="_parent">更多</a>
													</td>
												</tr>
											</table>
										</td>
									</tr>
									<tr>
										<td height="80px" align="left" valign="top" bgcolor="#F9F9F9"
											class="bgxz_zhong_bk2">
											<table width="157" height="80px" border="0" cellpadding="0"
												cellspacing="0"
												style="margin-top: 12px; margin-right: 10px; margin-left: 8px">
												<div style="height: 278px" id="fcookbookDiv">
													相关食谱层
												</div>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td align="left" valign="top">
							</td>
						</tr>
					</table>
				</td>
				<td width="11" align="left" valign="top">
					&nbsp;
				</td>
				<td width="500" align="left" valign="top" class="bk">
					<table width="567" border="0" cellpadding="0" cellspacing="0"
						style="margin-bottom: 20px">
						<tr>
							<td align="left" valign="top" bgcolor="#FFFFFF">
								<table style="background-color: skyblue; height: 40px">
									<tr>
										<td width="800">
											<strong><font color="#1F7EB5" size="5px">蔬菜</font> </strong>
											<strong><font color="#0B5596">食物查询</font> </strong>
											<select id="type1" onchange="getTypes()">
												<option value="">
													请选择类型
												</option>
												<option value="plant">
													植物篇
												</option>
												<option value="animal">
													动物篇
												</option>
											</select>
											<select id="type2" onchange="getFoodlist()">
												<option>
													请选择类别
												</option>
											</select>
											<select id="foodname" onchange="getFood()">
												<option>
													请选择相关食物
												</option>
												<!-- 此处菜名对应值为id  -->

											</select>
										</td>
									</tr>
								</table>
								<table width="554" border="0" cellspacing="0" cellpadding="0"
									style="margin-top: 10px; margin-left: 16px;">
									<tr>
										<td height="28" align="left" valign="middle" bgcolor="#FFFFFF">
											<table width="550" height="26" border="0" cellpadding="0"
												cellspacing="0" bgcolor="">
												<tr width="230px">
													<td width="80" align="left">
														<div class="myDivcss" onmouseover="overCss(this)"
															onmouseout="leaveCss(this)" onclick="changeMes(1)"
															align="left">
															<strong><font color="#1F7EB5" size="3px">简介</font></strong>
														</div>
													</td>
													<td width="100">
														<div class="myDivcss" onmouseover="overCss(this)"
															onmouseout="leaveCss(this)" onclick="changeMes(2)">
															<strong><font color="#1F7EB5" size="3px">保健功效</font></strong>
														</div>
													</td>
													<td width="100">
														<div class="myDivcss" onmouseover="overCss(this)"
															onmouseout="leaveCss(this)" onclick="changeMes(3)">
															<strong><font color="#1F7EB5" size="3px">使用提示</font></strong>
														</div>
													</td>
													<td width="100">
														<div class="myDivcss" onmouseover="overCss(this)"
															onmouseout="leaveCss(this)" onclick="changeMes(4)">
															<strong><font color="#1F7EB5" size="3px">营养成分</font></strong>
														</div>
													</td>
												</tr>
											</table>
										</td>
									</tr>
									<tr height="10"></tr>
									<tr>

										<td width="230px" height="180px">
											<img id="foodimg"
												style="WIDTH: 230px; HEIGHT: 180px; border: 1px solid bluesky; margin-bottom: 20px" />
										</td>


									</tr>
									<tr>
										<td colspan="2" style="border: 0px solid green; height: 300px">
											<div id="mesDiv1">
												显示对应食物
												<br />
												简介,保健功效,使用提示,营养成分

											</div>
											<div id="mesDiv2">
											</div>
											<div id="mesDiv3">
											</div>
											<div id="mesDiv4">
											</div>

										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<table width="779" height="114" border="0" align="center"
				cellpadding="0" cellspacing="0" style="margin-top: 13px">
				<tr>
					<td height="29" align="center" valign="top" class="ind_bottom_bj">
						<table border="0" cellspacing="0" cellpadding="0"
							style="margin-top: 3px">
							<tr>
								<td>
									<a href="about.asp~info_kind=010001.html"
										class="ind_bottom_ztys2">版权申明</a>
									<span class="ind_bottom_ztys2">|</span>
									<a href="daohang.asp~info_kind=010002.html"
										class="ind_bottom_ztys2">网站导航</a>
									<span class="ind_bottom_ztys2">|</span>
									<a href="yqlj.asp~info_kind=010003.html"
										class="ind_bottom_ztys2">友情链接</a>
									<span class="ind_bottom_ztys2">|</span>
									<a href="about.asp~info_kind=001005.html"
										class="ind_bottom_ztys2">联系我们</a>
									<span class="ind_bottom_ztys2">|</span>
									<a href="cjwt.asp~info_kind=007004.html"
										class="ind_bottom_ztys2">常见问题</a>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td height="85" align="center" valign="top">
						<table border="0" cellpadding="0" cellspacing="0"
							style="margin-top: 5px">
							<tr>
								<td align="center" valign="middle">
									<jsp:include page="users/yejiao.jsp"></jsp:include>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
	</body>
</html>
